import { createRouter, createWebHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
import { useUserStore } from '@/stores/useUserStore';
import { useLoginStore } from '@/stores/useLoginStore';

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    // 当用户访问根路径时，将加载 Layout.vue 组件作为页面的布局
    component: () => import('@/layout/Layout.vue'),
    redirect: '/news',
    // 定义了根路径下的多个子路由
    children: [
      {
        path: '/news',
        name: 'News',
        component: () => import('@/views/news/index.vue'),
        meta: {
          title: '新闻推荐'
        }
      },
      {
        path: '/forum',
        name: 'Forum',
        component: () => import('@/views/forum/index.vue'),
        meta: {
          title: '论坛'
        }
      },
      {
        path: '/forum/classify',
        name: 'ForumClassify',
        component: () => import('@/views/forum/classify/index.vue'),
        meta: {
          title: '论坛版块'
        }
      }
    ]
  },
  {
    path: '/edit/news',
    component: () => import('@/layout/SimpleLayout.vue'),
    children: [
      {
        path: '',
        name: 'NewsEdit',
        component: () => import('@/views/editNews/index.vue'),
        meta: {
          title: '编辑新闻',
          requiresAuth: true
        }
      }
    ]
  },
  {
    path: '/edit/blog',
    component: () => import('@/layout/SimpleLayout.vue'),
    children: [
      {
        path: '',
        name: 'BlogEdit',
        component: () => import('@/views/editBlog/index.vue'),
        meta: {
          title: '编辑博客',
          requiresAuth: true
        }
      }
    ]
  },
  {
    path: '/news/category/:id',
    component: () => import('@/layout/SimpleLayout.vue'),
    children: [
      {
        path: '',
        name: 'NewsCategory',
        component: () => import('@/views/news/category/index.vue'),
        meta: {
          title: '新闻分类详情'
        }
      }
    ]
  },
  {
    path: '/forum/category/:id',
    component: () => import('@/layout/SimpleLayout.vue'),
    children: [
      {
        path: '',
        name: 'ForumCategory',
        component: () => import('@/views/forum/category/index.vue'),
        meta: {
          title: '论坛分类详情'
        }
      }
    ]
  },
  {
    path: '/newsArticle/:id',
    component: () => import('@/layout/SimpleLayout.vue'),
    children: [
      {
        path: '',
        name: 'NewsArticle',
        component: () => import('@/views/newsArticle/index.vue'),
        meta: {
          title: '新闻详情'
        }
      }
    ]
  },
  {
    path: '/blogArticle/:id',
    component: () => import('@/layout/SimpleLayout.vue'),
    children: [
      {
        path: '',
        name: 'BlogArticle',
        component: () => import('@/views/blogArticle/index.vue'),
        meta: {
          title: '博客详情'
        }
      }
    ]
  },
  {
    path: '/messages',
    component: () => import('@/layout/SimpleLayout.vue'),
    children: [
      {
        path: '',
        name: 'Messages',
        component: () => import('@/views/messages/index.vue'),
        meta: {
          title: '消息中心',
          requiresAuth: true
        }
      }
    ]
  },
  {
    path: '/user/profile',
    component: () => import('@/layout/SimpleLayout.vue'),
    children: [
      {
        path: ':id',
        name: 'UserProfile',
        component: () => import('@/views/user/profile/index.vue'),
        meta: {
          title: '个人主页',
        }
      },
      {
        path: 'edit',
        name: 'EditProfile',
        component: () => import('@/views/user/profile/edit.vue'),
        meta: {
          title: '编辑个人资料',
          requiresAuth: true
        }
      }
    ]
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('@/views/error/404.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

router.beforeEach(async (to, _from, next) => {
  const userStore = useUserStore();
  const loginStore = useLoginStore();

  // 页面是否为私有页面
  if (to.matched.some(record => record.meta.requiresAuth)) {
    userStore.loadUserInfo();
    // 用户是否已登录
    if (!userStore.isLogin) {
      ElMessage.warning('请先登录');
      loginStore.openLoginDialog();
      next(false);
    } else {
      next();
    }
  } else {
    next();
  }
});

export default router
